<template>
    <div class="topbar">
        <!-- 版心 -->
        <div class="wrap topar-in">
            <!-- 左边标题 -->
            <div class="left">
                欢迎来到叩丁狼积分商城
            </div>
            <!-- 右边导航 -->
            <ul class="right">
                <li>
                    <img src="../assets/img/userImg.f8bbec5e.png" width="26px" alt="">
                    用户名：游客
                </li>
                <li>我的积分：--</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li class="login-btn" @click="loginshow(true)">登录</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {


    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        ...mapMutations({
            loginshow: "inloginshow/inloginhide"
        })
    },
};
</script>

<style lang="less" scoped>
.topbar {
    height: 40px;
    line-height: 40px;
    background: #242B39;
    font-size: 16px;
    font-family: SourceHanSansSC;
    color: #FFFEFE;

    .topar-in {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .right {
        display: flex;

        li {
            margin-left: 20px;
            cursor: pointer;

            img {
                vertical-align: middle;
                border-radius: 50%;
            }
        }

        .login-btn {
            height: 40px;
            width: 124px;
            background: #0A328E;

        }
    }
}
</style>